<template>
	<van-collapse
		class="base_collapse"
		v-model="value"
		:border="false"
	>
		<van-collapse-item
			:title="title"
			:label="label"
			:name="name"
			:value="itemValue"
			:title-class="['base_collapse_title', disabled ? 'disabled' : '', titleClass]"
			:disabled="disabled"
		>
			<template v-if="$slots.value" #value>
				<slot name="value"></slot>
			</template>
			<slot></slot>
		</van-collapse-item>
	</van-collapse>
</template>

<script setup>
import { computed, toRefs } from 'vue'

const props = defineProps({
	modelValue: {
		type: Array,
		default: () => []
	},
	title: {
		type: String,
		default: ''
	},
	label: {
		type: String,
		default: ''
	},
	itemValue: {
		type: String,
		default: ''
	},
	name: {
		type: [String, Number],
		default: ''
	},
	titleClass: String,
	disabled: Boolean
})

const emits = defineEmits(['update:modelValue'])

const value = computed({
	get() {
		const { modelValue } = toRefs(props)
		return modelValue.value
	},
	set (val) {
		// console.log(val)
		emits('update:modelValue', val)
	}
})
</script>

<style lang="less">
	.base_collapse {
		border-radius: 8px;
		overflow: hidden;
		.van-cell {
			padding: 16px;
			align-items: center;
		}
		&_title {
			display: flex;
			font-size: 17px;
			font-weight: 500;
			&.disabled {
				color: #c8c9cc !important;
			}
		}
		.van-collapse-item__content {
			padding-top: 0;
			padding-bottom: 0;
			>.van-cell {
				padding-left: 0;
				padding-right: 0;
				&:after { left:0; width: 100%; }
				>.van-cell__title {
					font-size: 16px;
					font-weight: normal;
					color: #1F2329;
				}
				>.van-cell__value {
					font-size: 15px;
					font-weight: normal;
				}
			}
		}
	}
</style>
